<script setup lang="ts">
import { cloneDeep } from 'lodash-es';
import FlUpload from '@fl/components/fl-upload.vue'

const id = defineModel<number>('id', { required: false })
const show = defineModel<boolean>('show', { required: true })
const emits = defineEmits(['update:show', 'confirm'])

// const urlList = ref([])
const isLoading = ref(false)
isLoading.value = true
setTimeout(() => {
    isLoading.value = false
}, 500);

const initialList = [
    { url: '' },

]
const hotList = ref(cloneDeep(initialList))
hotList.value = []

function submit() {
    emits('update:show', false)
    emits('confirm', id.value)
}

function goBack() {
    emits('update:show', false)
    console.log('取消')
}

function uploadSuccess() {
    console.log('上传成功', hotList.value)
}
</script>

<template>
    <PlusDialog v-model="show" :title="'图片热区'" width="1000" :has-footer="false" @close="goBack">
        <ElSkeleton v-if="isLoading" animated class="mt-20" />

        <template v-else>
            <div class="flex">
                <ElCard class="left" shadow="never">
                    111
                </ElCard>
                <ElCard class="right" shadow="never">
                    <div class="title">热区管理</div>
                    <div class="item" v-for="(item, index) in hotList" :key="index">
                        <div class="line1 flex justify-between">
                            <div>热区{{ index + 1 }}</div>
                            <div>操作</div>
                        </div>
                        <div class="line2 flex justify-between">
                            <div class="url">
                                <el-link :href="item.url" target="_blank">{{ item.url }}</el-link>
                            </div>
                            <div class="delete">
                                <ElButton type="text">删除</ElButton>
                            </div>
                        </div>
                    </div>
                    <div class="flex mt20">
                        <!-- <ElButton type="primary" plain size="small">
                            <div class="i-ic:baseline-add size-16" />
                            新增
                        </ElButton> -->
                        <FlUpload v-model="hotList" :limit="9" list-type="text" @success="uploadSuccess" />
                        <ElButton>
                            清空
                        </ElButton>
                    </div>
                </ElCard>
            </div>

            <div class="mt20" style="text-align: center">
                <el-button @click="goBack">
                    取消
                </el-button>
                <el-button type="primary" @click="submit">
                    确定
                </el-button>
            </div>
        </template>

    </PlusDialog>

</template>

<style lang="scss" scoped>
:deep(.el-card) {
    bsort: 1px solid #C9CDD4 !important;
}

.left {
    flex: 1;
}

.right {
    width: 400px;
    margin-left: 20px;
    height: 600px;
    overflow: auto;
    .title {
        font-size: 16px;
    }

    :deep(.el-upload-list) {
        display: none;
    }

    .item {
        .line1 {
            font-size: 14px;
            color: #86909C;
            height: 50px;
            line-height: 50px;
        }

        .line2 {
            bsort-top: 1px solid #E5E6EB;
            bsort-bottom: 1px solid #E5E6EB;
            height: 64px;

            // align-items: center;
            .url {
                flex: 1;
                background-color: rgb(247, 248, 250);
                // width: 200px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                padding: 20px 10px;
                :deep(.el-link) {
                    
                }

                :deep(.el-link__inner) {
                    color: #da0004;
                }
            }

            .delete {
                width: 60px;
                line-height: 64px;
                text-align: center;
                box-shadow: -2px 0px 4px 0px rgba(0, 0, 0, 0.25);
            }
        }

    }
}
</style>
